<template>
  <div class="flip-clock-warp">
    <FlipNumber v-for="(item,i) in hour" :key="'h_'+i" :back="Number(item)" class="clock-num" />
    <span class="split-num">:</span>
    <FlipNumber v-for="(item,i) in minutes" :key="'m_'+i" :back="Number(item)" class="clock-num" />
    <span class="split-num">:</span>
    <FlipNumber v-for="(item,i) in seconds" :key="'s_'+i" :back="Number(item)" class="clock-num" />
  </div>
</template>

<script>
import FlipNumber from './FlipNumber'
export default {
  name: 'FlipClock',
  components: {
    FlipNumber
  },
  data() {
    return {
      hour: '00',
      minutes: '00',
      seconds: '00'
    }
  },
  created() {
    const _this = this
    function setClock() {
      const now = new Date()
      let hour = now.getHours()
      let minutes = now.getMinutes()
      let seconds = now.getSeconds()
      if (hour <= 9) {
        hour = '0' + hour
      }
      _this.hour = hour.toString()
      if (minutes <= 9) {
        minutes = '0' + minutes
      }
      _this.minutes = minutes.toString()
      if (seconds <= 9) {
        seconds = '0' + seconds
      }
      _this.seconds = seconds.toString()
    }
    setClock()
    setInterval(() => {
      setClock()
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .flip-clock-warp {
    display: inline-block;
    line-height: 60px;
    background-color: #adadad;
    height: 60px;
    font-size: 0;
    padding: 10px;
    border-radius: 7px;
    border: 4px solid #333333;
    box-shadow: 0 0 3px 2px #000 inset;
  }
  .clock-num{
    margin-right: 5px;
    margin-left: 5px;
  }
  .split-num{
    display: inline-block;
    height: 60px;
    line-height: 0;
    font-size: 40px;
    color: #3a3c3e;
    vertical-align: middle;
    position: relative;
  }
</style>
